<template>

  <div class = "app-container">
    <div id="tchart" style="height: 700px;width: 900px;display: inline-block"></div>
    <div id="mchart" style="height: 700px;width: 900px;display: inline-block"></div>
  </div>
</template>



<script>
  import ecStat from 'echarts-stat'

  export default {
    data(){
      return{
        expData: [
          [0.918769, 4.692514],
          [0.886555, 4.604859],
          [0.569488, 3.864912],
          [0.066379, 3.184236],
          [0.335751, 3.500796],
          [0.426863, 3.743365],
          [0.395746, 3.622905],
          [0.694221, 4.310796],
          [0.27276, 3.583357],
          [0.503495, 3.901852],
          [0.067119, 3.233521],
          [0.038326, 3.105266],
          [0.599122, 3.865544],
          [0.947054, 4.628625],
          [0.671279, 4.231213],
          [0.434811, 3.791149],
          [0.509381, 3.968271],
          [0.749442, 4.25391],
          [0.058014, 3.19471],
          [0.482978, 3.996503],
          [0.466776, 3.904358],
          [0.357767, 3.503976],
          [0.949123, 4.557545],
          [0.41732, 3.699876],
          [0.920461, 4.613614],
          [0.156433, 3.140401],
          [0.656662, 4.206717],
          [0.616418, 3.969524],
          [0.853428, 4.476096],
          [0.133295, 3.136528],
          [0.693007, 4.279071],
          [0.178449, 3.200603],
          [0.199526, 3.299012],
          [0.073224, 3.209873],
          [0.286515, 3.632942],
          [0.182026, 3.248361],
          [0.621523, 3.995783],
          [0.344584, 3.563262],
          [0.398556, 3.649712],
          [0.480369, 3.951845],
          [0.15335, 3.145031],
          [0.171846, 3.181577],
          [0.867082, 4.637087],
          [0.223855, 3.404964],
          [0.528301, 3.873188],
          [0.890192, 4.633648],
          [0.106352, 3.154768],
          [0.917886, 4.623637],
          [0.014855, 3.078132],
          [0.567682, 3.913596],
          [0.068854, 3.221817],
          [0.603535, 3.938071],
          [0.53205, 3.880822],
          [0.651362, 4.176436],
          [0.901225, 4.648161],
          [0.204337, 3.332312],
          [0.696081, 4.240614],
          [0.963924, 4.532224],
          [0.98139, 4.557105],
          [0.987911, 4.610072],
          [0.990947, 4.636569],
          [0.736021, 4.229813],
          [0.253574, 3.50086],
          [0.674722, 4.245514],
          [0.939368, 4.605182],
          [0.235419, 3.45434],
          [0.110521, 3.180775],
          [0.218023, 3.38082],
          [0.869778, 4.56502],
          [0.19683, 3.279973],
          [0.958178, 4.554241],
          [0.972673, 4.63352],
          [0.745797, 4.281037],
          [0.445674, 3.844426],
          [0.470557, 3.891601],
          [0.549236, 3.849728],
          [0.335691, 3.492215],
          [0.884739, 4.592374],
          [0.918916, 4.632025],
          [0.441815, 3.75675],
          [0.116598, 3.133555],
          [0.359274, 3.567919],
          [0.814811, 4.363382],
          [0.387125, 3.560165],
          [0.982243, 4.564305],
          [0.78088, 4.215055],
          [0.652565, 4.174999],
          [0.87003, 4.58664],
          [0.604755, 3.960008],
          [0.255212, 3.529963],
          [0.730546, 4.213412],
          [0.493829, 3.908685],
          [0.257017, 3.585821],
          [0.833735, 4.374394],
          [0.070095, 3.213817],
          [0.52707, 3.952681],
          [0.116163, 3.129283]
        ],
        tData:[
          [1,1],[2,2],[3,3],[4,4],[5,5]
        ]
      }
    },
    mounted() {
      this.getRegressionChart()
    },
    methods: {
      getRegressionChart() {

        var myRegression = ecStat.regression('linear', this.expData,3);

        myRegression.points.sort(function(a, b) {
          return a[0] - b[0];
        });



        let  option = {
         title: {
           text: '线性回归',
           subtext: '排序算法',
           sublink: 'https://github.com/ecomfe/echarts-stat',
           left: 'center'
         },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross'
           }
         },
         xAxis: {
           type: 'value',
           splitLine: {
             lineStyle: {
               type: 'dashed'
             }
           },
         },
         yAxis: {
           type: 'value',
           min: 1.5,
           splitLine: {
             lineStyle: {
               type: 'dashed'
             }
           },
         },
         series: [{
           name: 'scatter',
           type: 'scatter',
           emphasis: {
             label: {
               show: true,
               position: 'left',
               color: 'blue',
               fontSize: 16
             }
           },
           data: this.expData
         }, {
           name: 'line',
           type: 'line',
           showSymbol: false,
           data: myRegression.points,
           markPoint: {
             itemStyle: {
               color: 'transparent'
             },
             label: {
               show: true,
               position: 'left',
               formatter: myRegression.expression,
               color: '#333',
               fontSize: 14
             },
             data: [{
               coord: myRegression.points[myRegression.points.length - 1]
             }]
           }
         },

         ],

       };
        var echarts = require('echarts')
        this.myChart = echarts.init(document.getElementById('tchart'), 'light');	// 初始化echarts, theme为light
        this.myChart.setOption(option,true);	// echarts设置初始化选项

        this.myChart = echarts.init(document.getElementById('mchart'), 'light');	// 初始化echarts, theme为light
        this.myChart.setOption(option,true);	// echarts设置初始化选项


      }
    }
  }
</script>
<style scoped>

</style>
